<template>
    <div class="bodyDiv">
        <Header :position="position"></Header>
      <div style="display: flex">
        <el-card style="width: 70%; margin-right: 10px;">
            <h3 slot="header">配置管理</h3>
          <div>
            <div style="display: flex;">
              <div style="width: 50%;text-align: center">
                <h3 style="margin-left: -50px">类型总数</h3>
                <h1 style="margin:0px;color: #91cc75;font-size: 100px;">{{current}}</h1>
              </div>
              <div style="width: 50%;text-align: center;">
                <h3 style="margin-left: -50px">设备总数</h3>
                <h1 style="margin:0px;color: #5470c6;font-size: 100px;">{{current}}</h1>
              </div>
            </div>
          </div>
        </el-card>
        <el-card style="width: 50%;">
          <div style="justify-content: space-between;padding: 40px">
            <div>
              <el-input
                style="width: 100%"
                placeholder="请输入内容搜索">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
                <el-button icon="el-icon-search" slot="append" style="width: 100px">检索</el-button>
              </el-input>
            </div>
            <div style="margin-top: 40px;width: 100%;display: flex">
              <el-button style="width:50%;margin-right: 50px" icon="el-icon-bottom">下载</el-button>
              <el-button type="primary" style="width:50%" icon="el-icon-plus" @click="dialogVisible=true">新增</el-button>
            </div>
          </div>
        </el-card>
<!--        <el-card style="width: 30%"></el-card>-->
      </div>
      <div style="margin-top: 10px;text-align: left">
        <el-card style="">
<!--          <div style="display: flex; justify-content: space-between; padding: 10px;border-color: #e2e2e2; border-width: 1px;border-style: solid; ">
            <div>
              <el-input
                style="width: 350px"
                placeholder="请输入内容搜索">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </div>
            <el-button-group>
              <el-button icon="el-icon-search">检索</el-button>
              <el-button type="primary" icon="el-icon-bottom">下载</el-button>
              <el-button type="primary" icon="el-icon-plus">新增</el-button>
            </el-button-group>
          </div>-->
          <el-table :data="testData"
                    style="width: 100%;"
                    stripe
                    highlight-current-row
                    height="542px"
                    ref="tableList">
            <el-table-column label="类型" prop="type">
<!--              <template slot-scope="scope">
                {{scope.row.type}}<el-link style="margin-left: 20px; float: right" type="danger">修改</el-link>
              </template>-->
              <template slot-scope="scope" v-show="scope.row.editable===true">
                <span v-show="!scope.row.editable">{{scope.row.type}}</span>
                <el-input v-model="scope.row.type" size="mini" v-show="scope.row.editable"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="位置" prop="position">
              <template slot-scope="scope" v-show="scope.row.editable===true">
                <span v-show="!scope.row.editable">{{scope.row.position}}</span>
                <el-input v-model="scope.row.position" size="mini" v-show="scope.row.editable"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="采集数据间隔" prop="interval">
              <template slot-scope="scope" v-show="scope.row.editable===true">
                <span v-show="!scope.row.editable">{{scope.row.interval}}</span>
                <el-input v-model="scope.row.interval" size="mini" v-show="scope.row.editable"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="开始运行时间" prop="starttime">
              <template slot-scope="scope" v-show="scope.row.editable===true">
                <span v-show="!scope.row.editable">{{scope.row.starttime}}</span>
                <el-input v-model="scope.row.starttime" size="mini" v-show="scope.row.editable"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="结束运行时间" prop="endtime" >
              <template slot-scope="scope" v-show="scope.row.editable===true">
                <span v-show="!scope.row.editable">{{scope.row.endtime}}</span>
                <el-input v-model="scope.row.endtime" size="mini" v-show="scope.row.editable"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="转动时间" prop="rolltime">
              <template slot-scope="scope" v-show="scope.row.editable===true">
                <span v-show="!scope.row.editable">{{scope.row.rolltime}}</span>
                <el-input v-model="scope.row.rolltime" size="mini" v-show="scope.row.editable"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                  <el-button type="primary" size="small" @click="scope.row.editable=true" v-show="scope.row.editable===false">修改</el-button>
                  <el-button size="small" @click="scope.row.editable=false" v-show="scope.row.editable===true">保存</el-button>
                  <el-button type="danger" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination style="margin-top: 5px"></el-pagination>
        </el-card>
      </div>
      <el-dialog
        title="新增配置"
        :modal-append-to-body="false"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleDialogClose"
        center>
        <el-steps :active="active" style="margin-bottom: 30px;">
          <el-step></el-step>
          <el-step></el-step>
          <el-step></el-step>
        </el-steps>
        <el-form v-show="active===1||active===3" :disabled="active===3">
          <el-form-item label="要添加配置的设备">
            <el-select placeholder="选择设备" style="float: right" v-model="newValue.device" >
              <el-option
                v-for="item in selectValue"
                :key="item"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form  v-show="active>=2">
          <el-form-item label="采集数据间隔">
            <el-input :disabled="active===3" v-model="newValue.interval" placeholder="填写采集数据间隔" style="float: right;width: 60%"></el-input>
          </el-form-item>
          <el-form-item label="设备运行时间">
            <el-date-picker
              :disabled="active===3"
              style="float: right"
              v-model="newValue.timestartend"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="转动时间">
            <el-date-picker
              :disabled="active===3"
              style="float: right"
              v-model="newValue.timeroll"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
        </el-form>
<!--        <div v-if="active===3">
          <p>设备名称:{{newValue.device}}</p>
          <el-divider></el-divider>
          <p>采集数据间隔:{{newValue.interval}}</p>
          <el-divider></el-divider>
          <p>设备运行时间:{{newValue.timestartend[0]}}至{{newValue.timestartend[1]}}</p>
          <el-divider></el-divider>
          <p>转动时间:{{newValue.timeroll}}</p>
          <el-divider></el-divider>
        </div>-->
        <div slot="footer" class="dialog-footer">
          <el-button @click="trainVisible = false">取 消</el-button>
          <el-button-group style="margin-left: 100px;white-space: nowrap">
            <el-button type="primary" @click="active--" :disabled="active===1">上一步</el-button>
            <el-button type="primary" @click="next" v-show="active<3">下一步</el-button>
            <el-button type="primary" @click="next" v-show="active===3">完 成</el-button>
          </el-button-group>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    import Header from "../../components/Header";
    export default {
        name: "SensorConfig",
      components:{
          Header
      },
      data(){
          return{
              position:{
                  secondTitle:'操作管理',
                  thirdTitle:'配置管理'
              },
            /*新增对话框显示*/
            selectValue:[
              'value1',
              'value2',
              'value3'
            ],
            newValue:{
              interval:'',
              timestartend:'',
              timeroll:'',
              device:''
            },
            dialogVisible:false,
            active:1,
            current:99,
            /*表格数据，写接口的时候要把数据库数据逐项插入editable=false，致写接口的人*/
            testData:[
              {
                type:'传感器',
                position:'传动端轴承',
                interval:'60分钟',
                starttime:'2020.11.07',
                endtime:'2020.12.02',
                rolltime:'27',
                editable:false,
              },
              {
                type:'传感器',
                position:'风动机',
                interval:'60分钟',
                starttime:'2020.12.05',
                endtime:'2020.12.12',
                rolltime:'7',
                editable:false,
              },
              {
                type:'传感器',
                position:'机舱',
                interval:'60分钟',
                starttime:'2020.11.09',
                endtime:'2020.12.12',
                rolltime:'3',
                editable:false,
              },
              {
                type:'传感器',
                position:'发电机',
                interval:'60分钟',
                starttime:'2020.11.10',
                endtime:'2020.12.21',
                rolltime:'11',
                editable:false,
              },
            ]
          }
      },
      methods:{
        next() {
          if (this.active++ > 2) {
            this.active = 1;
            this.dialogVisible=false;
          }

        }
      }
    }
</script>

<style scoped>

</style>
